<template>
  <div>
    <el-alert title="小提示" style="margin-bottom: 10px" show-icon :closable="false">
      <p>通过用户组对职责相同的用户进行分类并授权，可以更加高效地管理用户及其权限。</p>

      <p>对一个用户组进行授权后，用户组内的所有用户会自动继承该用户组的权限。</p>

      <p>如果一个用户被加入到多个用户组，那么该用户将会继承多个用户组的权限。</p>
    </el-alert>

    <k-toolbar>
      <el-button type="primary" style="margin-right: 10px" @click="onCreate">创建用户</el-button>

      <el-input
        prefix-icon="el-icon-search"
        placeholder="输入账户名、名字、用户ID"
        style="width: 350px"
        v-model="search"
        @input="debounceSearch"
      />
    </k-toolbar>

    <el-table :data="list" v-loading="loading">
      <el-table-column label="用户名/名字" prop="username">
        <template v-slot="{ row }">
          <router-link to="">{{ row.username }}</router-link>
          <br/>
          {{ row.nickname }}
        </template>
      </el-table-column>

      <el-table-column label="备注" prop="remark" />

      <el-table-column label="最后登陆" prop="login_time" />

      <el-table-column label="创建时间" prop="create_time" />

      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="text" @click="onEdit(row)">添加到用户组</el-button>

          <el-button type="text" @click="onDisabled(row)">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import { getManagers } from '@/services/manager.service'
import KToolbar from '@/components/toolbar.vue'
import _ from 'lodash'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'AuthUser',
  components: { KToolbar },
  setup () {
    const router = useRouter()
    const loading = ref(true)
    const list = ref<Manager[]>([])
    const search = ref('')
    const debounceSearch = ref()

    const getData = async () => {
      const resp = await getManagers()
      list.value = resp.list
    }

    const onSearch = () => {
      console.log('search')
      getData()
    }

    onMounted(async () => {
      // 防抖搜索框输入
      debounceSearch.value = _.debounce(onSearch, 500)

      try {
        await getData()
      } catch (e) {
      } finally {
        loading.value = false
      }
    })

    onUnmounted(() => {
      debounceSearch.value.cancel()
    })

    const onCreate = () => router.push('user/create')

    const onAddGroup = (row) => {
      console.log('添加到用户组', row)
    }

    const onEdit = (row) => {
      console.log('修改管理', row)
    }
    const onDisabled = (row) => {
      console.log('禁用管理', row)
    }
    return {
      list,
      loading,
      search,
      debounceSearch,
      onCreate,
      onAddGroup,
      onEdit,
      onDisabled
    }
  }
})
</script>

<style scoped lang="scss">

</style>
